<template>
	<div
		:style="{
			'background-color': bgColor,
			'color': color
		}"
		class='nav'
	>
		<slot />
		<div
			v-if="showTitle"
			class="title"
			@click="$pushTo('Home')"
		>
			<Iconfont
				name="icon-a-Group3"
				size="35"
				:color="color"
			/>
			<span>
				玩具旧物新生社区
			</span>
		</div>

		<Iconfont
			v-if="showBack"
			style="cursor: pointer;"
			name="icon-a-Group1"
			size="35"
			:color="backColor"
			@click="$router.go(-1)"
		/>
		<!-- 跳转导航栏 -->
		<div
			v-if="showNavs"
			class="links"
		>
			<div
				class="link"
				:class="item.name === selectNav ? 'active' : ''"
				v-for="item in navs"
				:key="item.name"
				@click="$pushTo(item.name)"
			>
				{{item.label}}
			</div>
		</div>
		<div
			style="flex: 1;"
			v-else
		/>
		<div class="nav-name">
			{{navName}}
		</div>
		<!-- 消息通知 -->
		<Iconfont
			class="inform"
			v-if="showInform"
			name="icon-a-Group12"
			size="32"
			:color="msgColor"
		/>
		<!-- 个人头像 -->
		<div
			v-if="showAvatar"
			class="avatar"
			@click="$pushTo('UserHome')"
		>
			<img :src="$storeGet('getMyInfo').avatar">
		</div>
		<!-- 收藏按键 -->
		<Iconfont
			class="collect"
			v-if="showCollect"
			name="icon-Group"
			size="32"
			:color="collectColor"
		/>
		<!-- 设置按键 -->
		<Iconfont
			class="setting"
			v-if="showSetting"
			name="icon-Vector"
			size="32"
			:color="settingColor"
		/>
	</div>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: '#fff'
    },
    msgColor: {
      type: String,
      default: '#fff'
    },
    collectColor: {
      type: String,
      default: '#00C9A9'
    },
    bgColor: {
      type: String,
      default: 'transparent'
    },
    backColor: {
      type: String,
      default: '#fff'
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    showCollect: {
      type: Boolean,
      default: false
    },
    showBack: {
      type: Boolean,
      default: false
    },
    showNavs: { // 展示导航跳转
      type: Boolean,
      default: false
    },
    showInform: {
      type: Boolean,
      default: false
    },
    showAvatar: {
      type: Boolean,
      default: false
    },
    navName: {
      type: String,
      default: ''
    },
    showSetting: {
      type: Boolean,
      default: false
    },
    settingColor: {
      type: String,
      default: '#01937C'
    }
  },
  data() {
    return {
      navs: [
        { label: '首页', name: 'Home' },
        { label: '改造教程', name: 'TransformCourse' },
        { label: '商城', name: 'Store' },
        { label: '分享社区', name: 'Community' },
      ],
      selectNav: 'Home'
    }
  },
  watch: {
    '$route': {
      handler: function(route) {
        this.selectNav = route.name
      },
      immediate: true
    }
  },
}
</script>

<style lang='scss' scoped>
.nav {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  height: 78px;
  padding: 0 50px;

  .title {
    display: flex;
    align-items: center;
    cursor: pointer;

    span {
      margin-left: 17px;
    }
  }

  .nav-name {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .links {
    display: flex;
    flex: 1;
    margin-top: -20px;
    margin-left: 55px;
    font-size: 20px;
    transform: translateY(20px);

    .link {
      padding-bottom: 20px;
      margin-right: 28px;
      cursor: pointer;
      border-bottom: 4px solid transparent;

      &.active {
        color: #00c9a9;
        border-color: #00c9a9;
      }
    }
  }

  .avatar,
  .inform {
    margin-left: 25px;
    cursor: pointer;

    img {
      width: 42px;
    }
  }
}
</style>
